﻿
<template>
  <div class="Letter_man_contain" ref="Detail_Excahnge_contain">
      <!--<div class="Letter_man_contain_header">
        派信员页面
      </div>-->   
      <div class="letter_msg" ref="letter_msg">
            <div class="letter_msg_box_left">
              <ul>
                <li>
                  学校：{{send_msg.school.schoolName}}
                </li>
                <li>
                  宿舍：{{send_msg.dorm}}
                </li>
                <li>联系方式：{{send_msg.phone}}</li>
                <li>负责范围：{{send_msg.territory}}</li>
              </ul>
            </div>
            <div class="letter_msg_box_right">
               <div class="letter_msg_box_right_header clearfix">
                 <!--../../../../static/img/bg_all.png-->
                 <img v-bind:src="send_msg.image|new_img_show_Act" class="letter_msg_img" />
                 <ul class="letter_msg_box_list">
                   <li>
                     名字：{{send_msg.name}}
                   </li>
                   <li>
                     ID:{{send_msg.ident}}
                   </li>
                 </ul>
               </div>
               <div class="letter_msg_box_right_bot">
                   <span> 派送次数</span> <span style="background-color:#fea501;color:#fff;width:19vw;border-radius:2vw;margin-left:0.2vw;display:inline-block;">{{send_msg.sendCount}}</span>
               </div>
            </div>
      </div>
      <ul class="letter_man_nav" ref="letter_man_nav">
        <li v-bind:class="{act:letter_man_act}" v-on:click="letter_man_nav(1)">
          待派
       </li><!--
          --><li v-on:click="letter_man_nav(2)"  v-bind:class="{act:!letter_man_act}">
                已派
             </li>
      </ul>
     <!-- select s-->
      <div class="select" ref="select">
        <ul class="select_btn_wrap">
          <li class="act_sel"  v-on:click="change_sel_time(1)">
            <span>按时间排列</span>
            <img src="../../../../static/img/sel_tri.png" class="sel_tri_1" v-bind:class="{sel_act:time_sel}">
          </li> <!--
          --><li  v-on:click="change_sel_time(2)">
             <span>按宿舍排列</span>
            <img src="../../../../static/img/sel_tri.png" v-on:click="change_sel_time"cclass="sel_tri_2" v-bind:class="{sel_act:!time_sel}">
          </li>
          <li>
            <!--<input placeholder="id搜索"  class="input_base" 
                                        style="width:25vw ; border:1px solid #9f5c2f;border-radius:4vw;
                                        height:1rem;padding-left:1vw;
                                        background:url(../../../../static/img/search_on_mid.png) no-repeat;
                                        background-size:5vw 4vw;
                                        background-position: 19vw center"  
                                        v-on:blur="search_id"
            />-->
            <input class="select_for_id" style="width:12vw;height:6vw;border:2px solid #bcbcbc;border-radius:2vw;font-size:3.5vw;" placeholder="id搜索" ref="search_ffff"/>
            <span class="certain_btn_span"style="width:8vw;height:6vw;border:2px solid #bcbcbc;line-height:6vw;display:inline-block;border-radius:2vw;font-size:3.5vw;" v-on:click="ceryain_l" >确认</span>
         
          </li>
        </ul>
      </div>
    <!-- select e -->
    <!--select box s-->
    <div class="page-loadmore-wrapper" ref="wrapper1" :style="{ height: wrapperHeight + 'px' }" style="overflow:scroll">
        <ul class="select_box_wrap">
          <!-- select_box s -->
          <li class="select_box"  v-for="list in show_data_list">
            <div class="select_box_header">
              <div class="select_box_header_left">
                ID:{{list.ident}}
              </div>
              <!--<div class="alre_btn">
                hjhj
                {{list.thom_name}}
              </div>-->
            </div>

            <div class="select_box_user_msg" style="display:flex;">

             <div class="select_box_user_msg_left">

               <!-- selecct_box_user_msg -->
               <img v-bind:src="list.userImage|judge_and_add_Base" class="select_box_user_msg_left_img"/>
               <p class="select_box_user_msg_name">
                 {{list.userName}}
               </p>
               <!-- selecct_box_user_msg -->

             </div>
             <div class="select_box_user_msg_right">
               <div class="select_box_user_msg_right_r">
                 <p class="select_box_user_msg_right_top">{{list.time|format_date(YMD)}}  &nbsp;&nbsp;&nbsp;&nbsp;<!--申请退货--></p>
                 <p class="select_box_user_msg_right_mid"  v-on:click="goods(list.postId)" >货物链接</p>
                 <p class="select_box_user_msg_right_num">数量{{list.quantity}}</p>
               </div>
               <div class="select_box_user_msg_right_l">
                 <img v-bind:src="list.postImage|new_img_show_Act" class="select_box_img"/>
               </div>
             </div>

            </div>
            <div class="select_box_address" style="margin-top:0.3rem;margin-left:2vw;">

                 <div class="select_box_address_top clearfix" style="margin-bottom:2.6vw;">
                   <div class="select_box_add_top_L" style="float:left;width:62vw;height:8vw;line-height:8vw;border-radius:2vw;background-color:#fda600;font-size:3.5vw;color:#fff;margin-right:4vw;margin-left:2vw;">
                     学生公寓11栋{{list.houseNo}}
                   </div>
                   <div class="select_box_add_top_R" style="float:right;height:8vw;width:22.5vw;background-color:#a05826;border-radius:2vw;font-size:3.5vw;color:#fff;line-height:8vw;margin-right:3vw;">
                     <img src="../../../../static/img/floor.png" style="width:3.7vw;height:4.1vw;vertical-align:sub;"><span style="padding-left:3vw;">{{list.houseNo}}</span>
                   </div>
                 </div> 

                 <div class="select_box_address_bottom clearfix" style="border-radius:2vw;height:8.8vw;line-height:8.8vw;padding-bottom:1vw;">
                      <div class="select_box_b_l" style="width:44vw;margin-left: 2vw;height:8.8vw;text-align:center;color:#fff;font-size:3.5vw;background-color:#4eae4d;border-radius:2vw;float:left;">
                        <img src="../../../../static/img/dianhua_on_home.png" style="width:6.4vw;height:5.3vw;vertical-align:sub;">
                        <a v-bind:href="list.phone|add_phone" style="margin-left:2vw;color:#fff;text-decoration:none;" v-if="!!list.phone">联系他</a>
                        <span style="margin-left:2vw;" v-if="!list.phone">没有联系方式</span>
                      </div>
                      <div class="select_box_b_r" style="float:right;background-color:#e74d4f;color:#fff;text-align:center;height:8.8vw;line-height:8.8vw;font-size:3.5vw;width:40vw;border-radius:2vw;margin-right:3vw;">
                        {{list.status}}
                      </div>
                 </div> 

            </div>
          </li>

          <!-- select bos e -->

          <li class="select_box" style="display:none">
            <div class="select_box_header">
              <div class="select_box_header_left">
                ID:{{list.ident}}
              </div>
              <div class="alre_btn">
                {{list.thom_name}}
              </div>
            </div>
            <div class="select_box_user_msg" style="display:flex;">
              <img :src="list.userImage|base_img" style="width:12vw;height:12vw;border:1px solid #9f5c2f;border-radius:1vw;margin-left:2vw;" />
              <div class="user_msg" style="text-align:left;width:75.5vw;height:3.8rem;
                border-radius:1.6vw;background-color:#eeeeee;color:#9f5c2f;font-size:0.8rem;margin-left:2vw;
                line-height:1.4;padding-left:2vw;padding-top:1vw;
                ">
                <p>{{list.time|fmtDate}} 申请提货</p>
                <p>货物链接&nbsp;&nbsp;<span v-on:click="goods(list.officialpost.id)">yizhiweimeng.com/goods</span></p>
                <p>数量 {{list.quantity}}</p>
              </div>
            </div>
            <div class="select_box_address" style="display:flex;margin-top:0.3rem;margin-left:2vw;">
              <div class="select_box_address_box" style="width:74.5vw;border:1px solid #9f5c2f;text-align:left;
                    padding-left:2vw;padding-top:1px;min-height:3.1rem;line-height:1.6;color:#9f5c2f;font-size:0.7rem;
              ">
                {{list.address}}
              </div>
              <div class="loucheng" v-on:click="storey_click(list.id)" style="width:15vw;height:3.1rem;background-color:#9f5c2f;color:#fff;
                                           border:1px solid #9f5c2f;padding-top:1px;font-size:0.9rem;line-height:1.6;">
                {{list.storey}}<br />
                层

              </div>
            </div>
            <textarea class="beizhu" v-on:blur="input_beizhu(list.id)" v-model="bei_zhu_m" style=" margin:0;padding:0;min-height:1.5rem;width:92vw;
                                  margin-left:2vw;border:1px solid #9f5c2f;
                                  margin-top:0.3rem;margin-bottom:0.4rem;display:block;color:#9f5c2f;">  
              {{list.remarkInfo}}
        </textarea>
        </li>
       
        <div class="get_more" v-on:click="get_more" v-show="change_bttom_btn">
              获取更多
        </div>
        <div class="get_more"  v-show="!change_bttom_btn">
            没有更多数据
        </div>
       </ul>

      </div>
      <!--select box e-->
      <!-- 层数输入s -->
      <!--<input type="type" name="name" value="" v-model="message" v-on:blur="input_num_on_input" ref="input_num"  style="opacity:0;position:absolute;top:0;left:0;z-index:-1;"/>-->
      <!-- 层数输入 e -->
    </div>
    
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import IScroll from "iscroll";
  import { Toast, Popup, MessageBox, Indicator} from 'mint-ui';
  import qs from "qs";
  //limit_Scroll

  import limit_scroll from "../../../../static/js/limit_scroll.js";
  import "../../../filter/filter.js"
  //import Detail from "./scroll_view/Detail_nav.vue"
  //import "../../../../static/css/scss/thom_c_size.scss";

export default {
  name: 'Detail_Exchange',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      letter_man_act: true,
      time_sel: true,
      send_msg: "",
      base_img: "",
      wrapperHeight: 600,
      allLoaded: false,
      bottomStatus: '',
      list: [],
      show_data_list: [],
      ajax_no: 1,
      change_bttom_btn: true,
      message: "",
      storey_click_id: "",
      bei_zhu_m:""
    }
  },
 
  mounted: function () {
    
    //this.$nextTick(() => {
    //  console.log(this.$refs.wrapper)
   
    //  console.log(this.$refs.permissions_tree);
    //});
   
    this.base_img = this.$store.getters.get_img_base;
   //let myScroll = new IScroll('#wrapper2');
    // limit_scroll(this.$refs.el, this.$refs.Detail_Excahnge_contain);
    let send_msg = JSON.parse(sessionStorage.getItem("send_man_msg"));
    this.send_msg = send_msg
    //return;
    Indicator.open();
    this.$http.post('/yizhiweimen/api/user/dispatchclerk/getDeliveryinfoByDcid',
      qs.stringify({
        dcid: this.send_msg.id,
        pageNo: 1,
        pageSize: 6,
        status: "发货中"
      })
    )
    .catch((thrown) => {
        Indicator.close();
        Toast({
          message: '网络出错',
          position: 'bottom',
          duration: 2000
        });
      }).then((e) => {
        Indicator.close();
        //this.$refs.input_num.value = "";
        this.show_data_list = e.data;
        for (let x = 0; x < this.show_data_list.length; x++) {
          this.show_data_list[x].thom_name = "待派"
        }

        this.$nextTick(() => {
     
          let letter_msg_h = window.getComputedStyle(this.$refs.letter_msg, null).height.replace("px","");
          let letter_msg_t = window.getComputedStyle(this.$refs.letter_msg, null).marginTop.replace("px", "");
          let letter_man_nav = window.getComputedStyle(this.$refs.letter_man_nav, null).height.replace("px", "");
          let letter_man_nav_t = window.getComputedStyle(this.$refs.letter_man_nav, null).marginTop.replace("px", "");
          let select = window.getComputedStyle(this.$refs.select, null).height.replace("px", "");
        
          let main_h = parseInt(letter_msg_h) + parseInt(letter_msg_t) + parseInt(letter_man_nav) + parseInt(letter_man_nav_t) + parseInt(select);
        
          this.wrapperHeight = document.documentElement.clientHeight - main_h;
    
          // 里面打印
        })

        //console.log("select++++++++++++++++++=");
        //console.log(e.data);
      })
  },
  filters: {
    fmtDate(obj) {
      var date = new Date(obj);
      var y = 1900 + date.getYear();
      var m = "0" + (date.getMonth() + 1);
      var d = "0" + date.getDate();
      return y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length);
    },
    base_img: function (value) {
      return "http://wx.yizhiweimeng.com/static/" + value
    }
  },
  methods: {
    //添加备注
    input_beizhu: function (id) {
     
      Indicator.open();
      this.$http.post('/yizhiweimen/api/user/dispatchclerk/updateStoreyOrRemarks',
        qs.stringify({
          remarks: this.bei_zhu_m,
          storey:"",
          id:id
        })
      )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          this.message = ""
          let letter_man_act = "'发货中'";
          if (this.letter_man_act == false) letter_man_act = "'已收货'"
          let time_sel = "'楼层'"
          if (this.time_sel == true) time_sel = "'时间'";
          this.all_ajax(1, letter_man_act, time_sel);
        })
    },
    //添加楼层
    input_num_on_input: function () {
    
      Indicator.open();
      this.$http.post('/yizhiweimen/api/user/dispatchclerk/updateStoreyOrRemarks',
        qs.stringify({
          storey: this.message,
          remarks:"",
          id: this.storey_click_id
        })
      )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          this.message = ""
          let letter_man_act = "发货中";
          if (this.letter_man_act == false) letter_man_act = "已收货"
          let time_sel = "楼层"
          if (this.time_sel == true) time_sel = "时间";
          this.all_ajax(1, letter_man_act, time_sel)
        })
    },
    ceryain_l: function () {
      //this.storey_click_id = id;
      //this.$refs.input_num.focus();
      ///api/user / dispatchclerk / updateStoreyOrRemarks
      this.$http.get('/yizhiweimen/api/user/dispatchclerk/searchByKeyword?keyword=' + this.$refs.search_ffff.value + "&did=" + this.send_msg.id,
        qs.stringify({
          keyword: this.$refs.search_ffff.value,
          did: this.send_msg.id
        })
        )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        })
        .then((e) => {
          Indicator.close();
          this.show_data_list = e.data;
          this.change_bttom_btn = true;
          if (e.data.length == 0) {
            this.change_bttom_btn = false;
            return;
          }
        })
    },
    certain_search:function () {
      ///api/user/dispatchclerk/searchByKeyword
      Indicator.open();
      this.$http.post('/yizhiweimen/api/user/dispatchclerk/searchByKeyword',
        qs.stringify({
          uident: id,
          did: this.send_msg.id,
          sort: sort
        })
        )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          this.show_data_list = e.data;
          this.change_bttom_btn = true;
          if (e.data.length == 0) {
            this.change_bttom_btn = false;
            return;
          }
        })
    },
    search_id:function (id) {
      let sort = "'时间'";
      if (this.time_sel == false) sort = "楼层"
      Indicator.open();
      this.$http.post('/yizhiweimen/api/user/dispatchclerk/getDeliveryinfoByUidAndDid',
        qs.stringify({
          uident: id,
          did: this.send_msg.id,
          sort: sort
        })
      )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          this.show_data_list = e.data;
          this.change_bttom_btn = true;
          if (e.data.length == 0) {
            this.change_bttom_btn = false;
            return;
          }
         
          //for (let x = 0; x < this.show_data_list.length; x++) {
          //  this.show_data_list[x].thom_name = state.replace(/\'+/, "").replace("'", "")
          //}
        })
    },
    all_ajax: function (no, state, sort) {
      Indicator.open();
      this.$http.post('/yizhiweimen/api/user/dispatchclerk/getDeliveryinfoByDcid',
        qs.stringify({
          dcid: this.send_msg.id,
          pageNo: no,
          pageSize: 6,
          status: state,
          sort: sort
        })
      )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          this.change_bttom_btn = true;
          if (e.data.length == 0) {
            this.change_bttom_btn = false;
            return;
          }
          this.show_data_list = e.data;
          state == "发货中" ? state ="待派" : state="已派";
       
          for (let x = 0; x < this.show_data_list.length; x++) {
            this.show_data_list[x].thom_name = state
          }
        })
    },
    //商品详情
    goods:function (id) {

      sessionStorage.setItem("off_post_id", id)
      this.$store.dispatch("thom_redirect",
        {
          name: "/Detail_Exchange?id=" + id, router: this.$router
        });
    },
    //上啦 s 获取更多
    get_more: function () {
      let letter_man_act = "发货中";
      if (this.letter_man_act == false) letter_man_act = "已收货"
      let time_sel = "楼层"
      if (this.time_sel == true) time_sel = "时间";
      this.ajax_no = this.ajax_no + 1

      this.all_ajax(this.ajax_no, letter_man_act, time_sel)
    },
    //时间排序
    change_sel_time: function (flag) {
      this.time_sel = !this.time_sel
      let letter_man_act = "发货中";
      if (this.letter_man_act == false) letter_man_act = "已收货"
      if (flag == 1) {//时间
        this.all_ajax(1, letter_man_act,"时间")
      } else {
        this.all_ajax(1, letter_man_act, "楼层")
      }
    },
    //待送 已送
    letter_man_nav: function (flag) {
      let time_sel = "楼层"
      if (this.time_sel == true) time_sel = "时间";
      if (flag == 1) {
        this.all_ajax(1, "发货中", time_sel)
      } else {
        this.all_ajax(1, "已收货", time_sel)
      }
      this.letter_man_act = !this.letter_man_act;
    },
    hide_detail: function () {
      window.removeEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
      this.$emit('hide_detail')
    }
  },
  components: {
    
  }
}
</script>


<!--<style scoped lang="sass">
  @mixin vw_w($width) {
    width: $width /750*100 + vw;
  }

  @mixin vw_h($h) {
    height: $h /750 *100 + vw;
  }

  .select_box_user_msg_left{
    width:vw_w(10);
    height:vw_h(10);
  }

</style>-->


<style scoped>
  /*select_box_user_msg_left_img s*/
  .select_box_img {
    width: 22.5vw;
    height: 18.5vw;
    display: block;
    margin-left: 13vw;
    margin-top: 1vw;
  } 
  .select_box_user_msg_right_num {
    margin-top: 3vw;
    margin-left: 3vw;
    color: #835531;
  }
  .select_box_user_msg_right_mid {
    margin-left: 3vw;
    margin-top: 2vw;
  }
  .select_box_user_msg_right_top {
    margin-left: 3vw;
    margin-top: 2vw;
  } 
  .select_box_user_msg_right {
    display:flex;
    width: 77.4vw;
    height: 20.4vw;
    border-radius: 2vw;
    background-color: #eeeeee;
    font-size: 3.5vw;
    color: #a3a3a3;
    text-align:left;
    margin-left:2vw;
  } 
  .select_box_user_msg_name {
    color: #666;
    height: 7.7vw;
    line-height: 7.7vw;
    font-size: 3vw;
    text-align: center;
    margin-left:2vw;
  } 
  .select_box_user_msg_left_img {
    width: 12.8vw;
    height: 12.8vw;
    border-radius: 2vw;
    display: block;
    margin-left:2vw;
  }
  /*select_box_user_msg_left_img e*/
  /*get_more s*/
  .get_more {
    height: 40px;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 4px;
    background-color: #bd7647;
    color: #fff;
  }
  /*get_more e*/
  /*上啦 s*/
  @component-namespace page {
    @component loadmore {
      @descendent desc {
        text-align: center;
        color: #666;
        padding-bottom: 5px;

        &:last-of-type {
          border-bottom: solid 1px #eee;
        }
      }

      @descendent listitem {
        height: 50px;
        line-height: 50px;
        border-bottom: solid 1px #eee;
        text-align: center;

        &:first-child {
          border-top: solid 1px #eee;
        }
      }

      @descendent wrapper {
        overflow: scroll;
      }

      .mint-spinner {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  @component mint-loadmore-bottom {
    span {
      display: inline-block;
      transition: .2s linear;
      vertical-align: middle;

      @when rotate {
        transform: rotate(180deg);
      }
    }
  }
  /*上啦 e*/
  .input_base::-webkit-input-placeholder {
    color: #9f5c2f;
    text-align: center;
    font-weight: 600;
    font-size:0.6rem;
    
    color:#9f5c2f;
  }

  .input_base:-moz-placeholder {
    text-align: center;
    color: #9f5c2f;
    font-weight: 600;
    font-size: 0.6rem;
    color: #9f5c2f;
  }

  .input_base:-ms-input-placeholder {
    text-align: center;
    /* IE10+ */
    color: #9f5c2f;
    font-weight: 600;
    font-size: 0.6rem;
    color: #9f5c2f;
  }
  .Letter_man_contain{
    height:100%;
  }
  .select_box_wrap {
    height:100%;
    overflow:scroll;
    background-color:#eee;
  } 
  .alre_btn {
    width: 4rem;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #e54d4c;
    color: #fff;
    text-align: center;
    font-size: 0.7rem;
    float: right;
    color: #fff;
    border-radius: 1vw;
    margin-top: 0.15rem;
    margin-right: 3%;
  } 
  .select_box {
    width: 97%;
    margin: 0.4rem auto;
    border-radius: 1vw;
    /*border: 1px solid #b4b4b4;*/
    border-radius:3vw;
    box-shadow:1px 1px 4px 2px #bbb;
    background-color:#fff;
  }
  .select_box_header {
    height: 1.55rem;
    line-height: 1.55rem;
  }
  .select_box_header_left {
    float: left;
    font-size: 0.6rem;
    color: #bfbfbf;
    margin-left: 3%;
  } 
  .select_box_header {
  } 
  .select_btn_wrap .sel_act {
    transform: rotate(180deg) translateY(50%);
  } 
  .select_btn_wrap img {
    display: block;
    width: 3vw;
    position: absolute;
    top: 50%;
    right: 7%;
    transform: translateY(-50%);
    background-repeat:no-repeat;
  }
  .select_btn_wrap li {
    width: 50vw;
    position:relative;
    text-align: center;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: 0.7rem;
    background-color: #fff;
    border-bottom: 2px solid #b7b7b7;
  }
  .select_btn_wrap {
    color: #b8b8b8;
    display: flex;
    justify-content:space-around;
  } 
  .Letter_man_contain {
    overflow:hidden;
    background-color: #eee;
  } 
  .letter_man_nav .act {
    background-color: #9f5c2f;
    color: #fff;
    justify-content: space-between;
  }
  .letter_man_nav li {
    background-color: #fff;
    display: block;
    vertical-align: bottom;
    width: 50vw;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 0.7rem;
    text-align: center;
    color: #9f5c2f;
    /*border-top: 0.4vw #9f5c2f solid;*/
    /*border-bottom: 0.4vw #9f5c2f solid;*/
  } 
  .letter_man_nav {
    margin-top:0.4rem;
    display: flex;
  } 
  .letter_msg_box_right_bot {
  } 
  .letter_msg_box_right_bot {
    margin-top:0.9rem;
    width: 40vw;
    height: 1.325rem;
    /*border: 2px solid #9f5c2f;*/
    border-radius: 1vw;
    font-size:0.8rem;
    line-height:1.8;
    color:#9f5c2f;
    text-align:center;
  } 
  .letter_msg_img {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 2vw;
    float: left;
    margin-right: 2vw;
  } 
  .letter_msg_box_list {
    float:left;
    //margin-bottom:2rem;
    font-size: 0.7rem;
    color: #9f5c2f;
    line-height: 1.2;
  }
  .letter_msg_box_list li:nth-child(1){
    margin-bottom:0.6rem;
  } 
  .letter_msg_box_right {
    width: 50%;
    padding-top:0.3rem;
    color:#844921;
    font-weight:bold;
  }
  .letter_msg_box_left {
    width: 50%;
    font-size: 0.7rem;
    line-height: 1.8;
    text-align: left;
    color: #844921;
    padding-top: 0.3rem;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 0.1rem;
    font-weight:bold
  } 
  .letter_msg {
    display: flex;
  }
  .letter_msg_box_left {
    width: 50%;
    float: left;
  }
  letter_msg_box_right {
    float: left;
    width: 50%;
    color: #844921;
    font-weight:bold;
  }
  .letter_msg {
    width: 93%;
    height: 5.35rem;
    background-color: #fff;
    box-shadow: 2px 2px 4px 2px rgba(128, 128, 128, 0.33);
    border-radius: 1vw;
    margin: 0.65rem auto 0;
  } 
  .Letter_man_contain_header {
    font-size: 0.9rem;
    text-align: center;
    height: 2.2rem;
    line-height: 2.2rem;
    letter-spacing: 1px;
    background-color: #9f5c2f;
    color: #fff;
  }

</style>